<template>
  <view class="card-info">
    <view class="top-info">
      <view class="top-info-a">游客驻留</view>
      <view style="flex:1"></view>
      <view :class="selectIndex == 1 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(1)">近七天
      </view>
      <view :class="selectIndex == 2 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(2)">近一月
      </view>
      <view :class="selectIndex == 3 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(3)">近三月
      </view>
      <view :class="selectIndex == 4 ? 'top-info-b' : 'top-info-b top-info-b-selected'" @click="selectChange(4)">近半年
      </view>
    </view>
    <echarts :eChartId="'eChartFour'" ref="echartsRef"></echarts>
  </view>
</template>

<script>
import {peoplePeopleResidency} from "../../../api/api";

export default {
  data() {
    return {
      selectIndex: 1,
      option: {},
      info: {}
    };
  },
  mounted() {
    let that = this
    setTimeout(function () {
      that.initData()
    }, 500)
  },
  methods: {
    initData() {
      this.$api.peoplePeopleResidency({dateType: this.selectIndex}).then(res => {
        this.info = res.data;
        this.initEcharts()
      });
    },
    initEcharts() {
      let that = this
      let dataArr = []
      for (let i = 0; i < this.info.length; i++) {
        let obj = this.info[i]
        dataArr.push({
          value: parseFloat(obj.peopleNumTwo, 10),
          name: obj.dayNum
        },)
      }
      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)",
        },
        color: [
          "#6699FF",
          "#29CCA9",
          "#FF9D0C",
          "#45C2E0",
        ],
        series: [
          {
            type: 'pie',
            radius: ['0%', '50%'],
            data: dataArr,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#ffffff'
            },
            label: {
              //echarts饼图内部显示百分比设置
              show: true,
              position: "inside", //outside 外部显示  inside 内部显示
              formatter: `{d}%`,
              color: "#ffffff", //颜色
              fontSize: 12 //字体大小
            }
          },
          {
            type: "pie",
            radius: ['0%', '50%'],
            itemStyle: {
              borderWidth: 5,
              borderColor: '#ffffff'
            },
            label: {
              normal: {
                formatter: function (params){
                  return '驻留' + params.name + '\n' + params.value + '人';
                },
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 10,
                },
              },
            },
            data: dataArr,
          },
        ]
      }
      this.$refs.echartsRef.changeChart(this.option)
    },
    selectChange(index) {
      this.selectIndex = index
      this.initData()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../index.scss';

.stat-one-info {
  display: flex;
  padding-top: 30 rpx;

  .stat-one-word {
    display: flex;
    align-items: center;
    height: 75 rpx;

    .stat-one-word-a {
      font-size: 54 rpx;
      font-weight: 800;
      color: #333333;
    }

    .stat-one-word-b {
      font-size: 20 rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .stat-one-word-c {
    font-size: 20 rpx;
    font-weight: bold;
    color: #A8A8A8;
    height: 50 rpx;
    line-height: 50 rpx;
  }

  img {
    height: 120 rpx;
    width: 300 rpx;
  }
}

</style>
